<template>
  <div>
    <el-card>
      <el-form>
        <el-form-item>
          <el-input v-model.trim="pic_name" placeholder="图片名称" style="width:148px;margin-bottom:10px"></el-input>
          <el-upload :action="uploadPic" :data="{pic_name:this.pic_name}" :limit="1" :file-list="pic_url" list-type="picture-card" :headers="headerObj" :on-success="upPicSuccess"
            :on-remove="upPicRemove" :before-upload="upPicBefore">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog> -->
        </el-form-item>
      </el-form>
      <el-table :data="picList" border>
        <el-table-column type="index" width="50" label="#">
        </el-table-column>
        <el-table-column label="日期" prop="create_time" width="230"></el-table-column>
        <el-table-column label="图片" width="100">
          <template v-slot:default="scope">
            <el-image :src="'https://'+scope.row.pic_url" :preview-src-list='srcList' style="width:60px;height:60px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="pic_name"></el-table-column>
        <el-table-column label="地址" prop="pic_url"></el-table-column>
        <el-table-column label="id" width="100" prop="id"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button type="danger" @click="deleteTap(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total='total' :page-size="queryInfo.pagesize" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getFileListApi, deleteFileApi } from '../../request/apis'
export default {
  data () {
    return {
      queryInfo: {
        pagenum: 1,
        type: 'pic',
        pagesize: 8
      },
      picList: [],
      srcList: [],
      total: 0,
      uploadPic: 'https://api.thunderup.cn/api/uploadpic',
      // uploadPic: 'http://127.0.0.1:5000/api/uploadpic',
      cover_img: '',
      pic_name: '',
      pic_url: [],
      // dialogVisible: false,
      // dialogImageUrl: '',
      headerObj: {
        Authorization: 'Bearer ' + window.localStorage.getItem('access_token')
      }
    }
  },
  created () {
    this.getFileList()
  },
  methods: {
    async getFileList () {
      const { data, meta } = await getFileListApi(this.queryInfo)
      if (meta.status === 200) {
        this.picList = data.pics
        this.picList.forEach(item => {
          this.srcList.push('https://' + item.pic_url)
        })
        this.total = data.total
      }
    },
    handleCurrentChange () {
      this.getFileList()
    },
    async deleteTap (id) {
      const params = {
        id,
        type: 'pic'
      }
      const { meta } = await deleteFileApi(params)
      if (meta.status === 200) {
        this.$message.success('删除成功')
        this.getFileList()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 上传图片
    // upPicPreview (file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible = true
    // },
    upPicSuccess (response, file, fileList) {
      if (response.meta.status === 200) {
        // this.cover_img = response.data.file_url
        this.$message.success('上传图片成功')
        this.getFileList()
        this.upPicRemove()
      } else {
        this.$message.error('上传图片失败')
        this.dialogImageUrl = ''
      }
      if (response.meta.status === 403) {
        this.$message.error('身份信息过期请重新登录')
        return this.$router.push('/login')
      }
    },
    upPicBefore () {
      if (!this.pic_name) {
        this.$message.error('请输入名称')
        return false
      }
    },
    upPicRemove () {
      this.cover_img = ''
      this.pic_url = []
      this.pic_name = ''
    }
  }
}
</script>

<style>
</style>
